<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>资产类型</title>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/sanziguanli/zichanleixing.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../mock/mock/mock-min.js"></script>
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../mock/mock1.js"></script>
    <style>
        .layui-form-selected dl {
            text-align: left;
        }
    </style>
</head>

<body>
    <div class="layui-contaniner" style="padding: 15px; background-color: #f2f2f2;">
        <div class="layui-head">
            <div class="first second">

                <div class="layui-row">
                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 anniu">
                        <button class="layui-btn layui-btn-normal" lay-event="edit" id="btn1" onclick="tianjia()">
                                <i class="layui-icon layui-icon-addition"></i><span>添加</span>
                            </button>
                    </div>
                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 anniu">
                        <button class="layui-btn shanchucheck" lay-event="del" id="btn2" style="background-color: #ff4d4f;"><i class="layui-icon layui-icon-delete" ></i>
                                <span>删除</span>
                            </button>
                    </div>
                    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                        &nbsp;
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">
                        <form class="layui-form" lay-filter="saixuan">
                            <div class="layui-row">
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                                    <select id="qu1" name="areaId" lay-verify="required" lay-filter="qu1">
                                        <option value="">地区筛选(区/县)</option>
                                    </select>
                                </div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                                    <select id="zhen1" name="townid" lay-verify="required" name="townId" lay-filter="zhen1">
                                        <option value="">地区筛选(镇/街道)</option>
                                    </select>
                                </div>

                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                                    <select name="villageId" lay-verify="required" id="cun1" name="villageId">
                                <option value="">地区筛选(村)</option>
                            </select>
                                </div>

                                <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2 ">
                                    <input type="text" name="keyWords" lay-verify="required" placeholder="查询内容或字段" autocomplete="off" class="layui-input chaxun">
                                </div>


                                <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 anniu1">
                                    <button type="button" class="layui-btn layui-btn-normal" onclick="chaxun()" style="margin-left: 60px;">
                            <i class="layui-icon layui-icon-search"></i>&nbsp;&nbsp;查询
                            </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
            <div class="layui-footer">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="barDemo">
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" style="height:22px;">编辑</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" style="height:22px;">删除</button>
    </script>

    <script>
        var form
        var option
        var layer
        layui.use(['table', 'layer'], function() {
            table = layui.table;
            form = layui.form;
            layer = layui.layer;
            form.render();
            option = {
                id: 'idTest',
                url: url + 'assetstype/query',
                elem: '#demo',
                // width: 1300,
                page: true,
                size: 'lg',
                limits: [10, 20, 50, 100, 200, 500],
                //toolbar: true,
                method: 'post',
                skin: 'line',
                text: {
                    none: '暂无数据' //默认：无数据。
                },
                headers: {
                    token: localStorage.getItem('token')
                },
                request: {
                    pageName: "currentPage",
                    limitName: "size",
                },
                where: {
                    townId: "",
                    villageid: "",
                },
                parseData: function(res) {
                    if (res.code == "401") {
                        window.parent.window.location.href = "../login/index.html"
                    }

                    //res 即为原始返回的数据
                    return {
                        code: 0, //解析接口状态
                        msg: res.msg, //解析提示文本
                        count: res.data.count, //解析数据长度
                        data: setdata(res.data.AssetsTypeList), //解析数据列表
                    };
                },
                cols: [
                    [{
                        field: 'checkbox',
                        type: 'checkbox',
                        width: 100,
                        align: 'center'
                    }, {
                        field: 'number',
                        title: '序号',
                        width: 100,
                        align: 'center',
                        type: 'numbers'
                    }, {
                        field: 'villagename',
                        title: '所属村',
                        width: 300,
                        align: 'center'
                    }, {
                        field: 'assetstypename',
                        title: '资源类型名称',
                        width: 450,
                        align: 'center',
                        sort: true
                    }, {
                        field: 'operation',
                        title: '操作',
                        align: 'center',
                        toolbar: '#barDemo'
                    }]
                ]
            };
            tableIns = table.render(option);
            // 镇生成
            areas.forEach(item => {
                // console.log($('#zhen1')[0].innerHTML)
                $('#qu1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
            })
            towns.forEach(item => {
                    // console.log($('#zhen1')[0].innerHTML)
                    $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                //镇生成
            form.on('select(qu1)', function(data) {
                $('#zhen1').empty()
                $('#zhen1')[0].innerHTML += ` <option value="">地区筛选(镇/街道)</option>`
                villages.forEach(item => {
                    if (item.areaId == data.value) {
                        $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                    }
                })
                form.render('select', "saixuan")
            });
            // 村生成
            form.on('select(zhen1)', function(data) {
                $('#cun1').empty()
                $('#cun1')[0].innerHTML += ` <option value="">地区筛选(村)</option>`
                villages.forEach(item => {
                    if (item.townId == data.value) {
                        $('#cun1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                    }
                })
                form.render('select', "saixuan")
            });
            form.render('select', "saixuan")

            table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if (layEvent === 'del') { //删除
                    layer.open({
                        title: '温馨提示',
                        type: '0',
                        area: ['400px', '160px'],
                        offset: 'auto',
                        content: '<div><p>你确定要删除选中项吗</p></div>',
                        btn: ['取消', '确认'],
                        btn2: function() {
                            var data = {};
                            data.IdList = [];
                            data.IdList.push(obj.data.id)
                            console.log(data)
                            $.ajax({
                                url: url + "assetstype/del",
                                method: "post",
                                traditional: true, //防止深度序列化
                                data: data,
                                success: function(data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        table.reload("idTest", option);
                                        layer.msg('删除成功!')
                                    } else {
                                        layer.msg(data.msg)
                                    }
                                },
                                error: function(err) {
                                    layer.msg('删除失败!')
                                },
                            });
                            layer.closeAll();
                        },
                        btn1: function() {
                            layer.msg('已取消操作')
                        },
                        shade: [0.5, '#000']
                    });
                };

                //编辑行内容
                if (layEvent === 'edit') {
                    layer.open({
                        title: '<span>编辑</span>',
                        type: '0',
                        area: ['500px', '350px'],
                        offset: ['100px', '450px'],
                        content: `<div class="">
                          <form class="layui-form" lay-filter="bianji" action="">
                            <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" lay-filter="qu" >
                    <option value="">请输入所属区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                    <option value="">请输入所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属村</label>
            <div class="layui-input-block">
                <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                    <option value="">请输入所属村</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" value="` + obj.data.name + `"  lay-filter="zhenjiedaoxinxi" name="name" required lay-verify="required" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
            </div>
        </div>
		<div class="dibu">
			<button class="layui-btn layui-btn-normal bianji" type="button" lay-filter="bianji">确定</button>
			<button class="layui-btn layui-btn-danger quxiao" type="button" lay-filter="quxiao">取消</button>
		</div>				  
			</form>
		</div>`,
                        // btn: ['取消','确认'],
                        success: function() {
                            areas.forEach(item => {
                                $('#qu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            })
                            towns.forEach(item => {
                                $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            })
                            villages.forEach(item => {
                                $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            })

                            // 监听每一个选择框的选择事件
                            // 1.区选择
                            form.on('select(qu)', function(data) {
                                $('#zhen').empty()
                                $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                                towns.forEach(item => {
                                    if (item.areaId == data.value) {
                                        $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    }
                                })
                                form.render('select', "bianji")
                            });
                            // 2.镇监听
                            form.on('select(zhen)', function(data) {
                                $('#cun').empty()
                                $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                                villages.forEach(item => {
                                    if (item.townId == data.value) {
                                        $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    }
                                })
                                form.render('select', "bianji")
                            });

                            console.log(obj)
                            $('#qu').val(obj.data.areaId)
                            $('#zhen').val(obj.data.townId)
                            $('#cun').val(obj.data.villageId)
                            form.render("select", "bianji");
                            $(".bianji").click(function() {
                                var data1 = form.val("bianji");
                                data1.id = obj.data.id;
                                console.log(data1);
                                $.ajax({
                                    url: url + "assetstype/update",
                                    method: "post",
                                    data: data1,
                                    success: function(data) {
                                        console.log(data)
                                        if (data.code === 200) {
                                            layer.closeAll();
                                            table.reload("idTest", option);
                                            layer.msg('编辑成功!')
                                        } else {
                                            layer.msg(data.msg)
                                        }
                                    },
                                    error: function(err) {
                                        console.log(data)
                                        layer.msg('编辑失败!')
                                    },
                                });
                            });
                            $(".quxiao").click(function() {
                                layer.msg('取消成功')
                            })
                        },
                        shade: [0.5, '#000']
                    });
                }
            });

            // 根据上面的删除check选中的进行删除
            $(document).ready(function() {
                $('.shanchucheck').click(function() {
                    var checkStatus = table.checkStatus("idTest"); //idTest 即为基础参数 id 对应的值
                    console.log(checkStatus.data); //获取选中行的数据
                    var data = {}
                    data.IdList = [];
                    checkStatus.data.forEach((item) => {
                        data.IdList.push(item.id);
                    });
                    console.log(data)
                        // data=JSON.stringify(data)
                        // console.log(data)
                    $.ajax({
                        url: url + "assetstype/del",
                        method: "post",
                        data: data,
                        traditional: true, //防止深度序列化,
                        // type:"json",
                        success: function(data) {
                            if (data.code === 200) {
                                layer.closeAll();
                                table.reload("idTest", option);
                                layer.msg("删除成功")
                            } else {
                                layer.msg(data.msg);
                            }
                            console.log(data);
                        },
                        error: function(err) {},
                    });
                })
            })
        });
    </script>

    <script>
        function tianjia() {
            layer.open({
                title: '<span>添加</span>',
                type: '0',
                area: ['500px', '350px'],
                offset: ['100px', '450px'],
                content: `<div class="">
                          <form class="layui-form" lay-filter="tianjia" action="">
                            <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" lay-filter="qu">
                    <option value="">请输入所属区</option>
                </select>
            </div>
        </div>                    
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                    <option value="">请输入所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属村</label>
            <div class="layui-input-block">
                <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                    <option value="">请输入所属村</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="zhenjiedaoxinxi" name="name" required lay-verify="required" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="dibu">
			<button class="layui-btn layui-btn-normal tianjia" type="button" lay-filter="bianji">确定</button>
			<button class="layui-btn layui-btn-danger quxiao" type="button" lay-filter="quxiao">取消</button>
		</div>
		</form>
	</div>`,
                // btn: ['取消','确认'],
                success: function() {
                    areas.forEach(item => {
                        $('#qu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                    })
                    towns.forEach(item => {
                        $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                    })
                    villages.forEach(item => {
                            $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        })
                        // 1.区选择
                    form.on('select(qu)', function(data) {
                        $('#zhen').empty()
                        $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                        towns.forEach(item => {
                            if (item.areaId == data.value) {
                                $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            }
                        })
                        form.render('select', "tianjia")
                    });
                    form.on('select(zhen)', function(data) {
                        $('#cun').empty()
                        $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                        villages.forEach(item => {
                            if (item.townId == data.value) {
                                $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            }
                        })
                        form.render('select', "tianjia")
                    });
                    form.render("select", "tianjia");
                    $(".tianjia").click(function() {
                        var data1 = form.val("tianjia");
                        data1.id = 0;
                        console.log(data1);
                        $.ajax({
                            url: url + "assetstype/add",
                            method: "post",
                            data: data1,
                            success: function(data) {
                                console.log(data)
                                if (data.code === 200) {
                                    layer.closeAll();
                                    table.reload("idTest", option);
                                    layer.msg('添加成功!')
                                } else {
                                    layer.msg(data.msg)
                                }
                            },
                            error: function(err) {
                                console.log(data)
                                layer.msg('添加失败!')
                            },
                        });
                    });
                    $(".quxiao").click(function() {
                        layer.msg('取消成功')
                    })
                },
                shade: [0.5, '#000']
            });
        };
    </script>
    <script>
        //导入数据
        function setdata(data) {
            console.log(data)
            data.forEach(item => {
                item.villagename = getvillage(item.villageId).name
                item.assetstypename = item.name
            })
            console.log(data)
            return data
        }
        // 设置查询刷新列表
        function chaxun() {
            var data = form.val("saixuan");
            console.log(data)
            option.where.areaId = data.areaId
            option.where.townid = data.townid
            option.where.villageId = data.villageId
            option.where.name = data.keyWords
            console.log(option.where)
            table.reload("idTest", option);
            option.where.townid = ""
            option.where.villageId = ''
            option.where.name = ""
        }
    </script>
</body>

</html>